<template>
	<div class="sw_set_wrapper">
		<div class="config" v-for="(item, index) in configListData" :key="index">
			<h4>{{ item.name }}</h4>
			<dl>
				<dt v-if="!!item.filed19">{{ item.filed19 }}</dt>
				<dd>
					<template v-if="item.filed1 === '1'">
						<el-input-number size="small" v-model="item.dictValue" controls-position="right" :min="1"></el-input-number>
						<span class="unit" v-if="!!item.filed20">{{ item.filed20 }}</span>
						<el-button type="primary" size="small" @click="handleSaveConfig(item)">保存</el-button>
					</template>
					<template v-if="item.filed1 === '2'">
						<el-switch v-model="item.dictValue" active-value="1" inactive-value="2" @change="handleSaveConfig(item)"></el-switch>
					</template>
					<template v-if="item.filed1 === '3'">
						<el-radio-group v-model="item.dictValue" :aria-hidden="false" @change="handleSaveConfig(item)">
							<el-radio v-for="(n, i) in item.children" :key="i" :label="n.value">{{ n.label }}</el-radio>
						</el-radio-group>
					</template>
					<template v-if="item.filed1 === '4'">
						<el-radio-group v-model="item.dictValue" :aria-hidden="false" @change="handleSaveConfig(item)">
							<div class="image_radio" v-for="(n, i) in item.children" :key="i">
								<el-image ref="image" :src="n.img" :preview-src-list="[n.img]"></el-image>
								<el-radio :label="n.value">{{ n.label }}</el-radio>
							</div>
						</el-radio-group>
					</template>
					<template v-if="item.filed1 === '5'">5</template>
					<template v-if="item.filed1 === '6'">
						<el-input size="small" v-model="item.dictValue" placeholder="请输入内容" v-autowidth="inputAutoWidth"></el-input>
						<el-button size="small" type="primary" @click="handleSaveConfig(item)">保存</el-button>
					</template>
					<template v-if="item.filed1 === '7'">
						<el-input
							size="small"
							v-model="item.dictValue"
							spellcheck="false"
							type="textarea"
							autosize
							resize="none"
							placeholder="请输入内容"
						></el-input>
						<el-button size="small" type="primary" @click="handleSaveConfig(item)">保存</el-button>
					</template>
					<template v-if="item.filed1 === '8'">
						<el-switch v-model="item.dictValue" active-value="1" inactive-value="2" @change="handleSaveConfig(item)"></el-switch>
					</template>
				</dd>
			</dl>
			<p v-if="!!item.content">{{ item.content }}</p>
			<template v-if="item.filed1 === '8'">
				<slot name="custom" :data="item"></slot>
			</template>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { updateDictDefine } from '@/api/system/tbSysDictDefinition';
export default {
	name: 'swSetFrame',
	props: {
		type: { type: String, default: '' }
	},
	data() {
		return {
			inputAutoWidth: {
				minWidth: '200px',
				maxWidth: '100%'
			},
			configListData: []
		};
	},
	computed: {
		...mapGetters(['siteConfig', 'dictConst']),
		configData() {
			let configs = this.siteConfig.filter((n) => n.type === this.type);
			return configs.length > 0 ? configs : [];
		}
	},
	watch: {
		configData: {
			handler(arr) {
				this.configListData = arr.map((item) => {
					let obj = { ...item, dictValue: this.dictConst[item.filed13] };
					if (['3', '4'].some((n) => n === item.filed1)) {
						let options = !!item.filed22 && this.$isJSON(item.filed22) ? JSON.parse(item.filed22) : [];
						let optArrs = !Array.isArray(options) ? [] : options;
						if (obj.filed1 === '3') {
							obj['children'] = optArrs;
						} else {
							obj['children'] = optArrs.map((n) => ({ ...n, img: window.staticPath + n.img }));
						}
					}
					return obj;
				});
			},
			immediate: true
		}
	},
	methods: {
		async handleSaveConfig(data) {
			let params = { id: data.filed14, name: data.dictValue };
			let result = await updateDictDefine(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('更新配置成功');
				this.$store.dispatch('getOpenDictData');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_set_wrapper::v-deep {
	flex: 1;
	line-height: 1;
	padding: 16px;
	overflow: auto;
	h4 {
		font-size: 15px;
	}
	p {
		color: #909399;
		margin-top: 16px;
	}
	.config {
		margin-top: 24px;
		&:first-child {
			margin-top: 0;
		}
		dl {
			display: flex;
			align-items: center;
			padding-top: 16px;
		}
		dt {
			margin-right: 10px;
		}
		dd {
			display: flex;
			align-items: flex-start;
			flex: 1;
			overflow: hidden;
			span.unit {
				line-height: 32px;
				margin-left: 10px;
				font-size: 14px;
			}
			.el-button {
				margin-left: 10px;
			}
		}
	}
	.el-divider {
		margin: 16px 0 0;
	}
	.el-radio-group {
		flex: 1;
	}
	.image_radio {
		float: left;
		position: relative;
		width: 200px;
		border-radius: 4px;
		margin: 0 16px 16px 0;
		border: solid 1px #ebeef5;
		overflow: hidden;
		&:last-child {
			margin-right: 0;
		}
		.el-image {
			display: block;
			width: 200px;
			height: 112.5px;
			border-bottom: solid 1px #ebeef5;
			img {
				height: auto;
			}
		}
		.el-radio {
			display: flex;
			align-items: center;
			padding: 10px;
		}
		.el-radio__input {
			font-size: 0;
			line-height: 1;
		}
	}
}
</style>
